<script setup lang="ts">
import { onMounted } from 'vue';

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
onMounted(()=>{
let myChart = echarts.init(document.getElementById('five'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'Echars入门示例',
    textStyle:{
      color:'white'
    }
  },
  toolitip:{
    show:true
  },
  legend: {
    data: ['昨日销量', '今日销量']
  },
  radar: {

    indicator: [
      { name: '裤子', max: 6500 },
      { name: '衬衫', max: 16000 },
      { name: '羊毛衫', max: 30000 },
      { name: '雪纺衫', max: 38000 },
      { name: '高跟鞋', max: 50000 },
      { name: '袜子', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '昨日销量'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: '今日销量'
        }
      ]
    }
 ]
});
window.onresize=()=>{
  myChart.resize();
}
})
</script>

<template>
  <div class="box">
    <div id="five">

    </div>
    </div>
</template>

<style scoped>
.box{
  background-image: url(../images/kuang.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#five{
  height: 100%;
}
</style>